<template>
  <intro-view :usage="usage">
    <div ref="page">
      <button @click="usage1">Base usage1</button>
      <br/>
      <button @click="usage2">Multi request use one Toast</button>
      <br/>
      <button @click="usage3">Toast with promise</button>
    </div>
  </intro-view>
</template>

<script>
  import usage from './usage.md'
  export default {
    data() {
      return {
        usage
      }
    },
    methods: {
      usage1 () {
        /*let loading1 = */this.$UiToastDialog.new({
          onEl: this.$refs['page'],
          duration: 3000,
          icon: 'icon-loading',
          callback: () => { console.log('closed') }
        })
        // 不设置duration的时候需要手动关闭
        // setTimeout(function () {
        //   loading1.close()
        // }, 3000)
      },
      // new 几个相同的identify，就需要调用多少次 close 方法
      usage2 () {
        let identify1Loading = this.$UiToastDialog.new({
          onEl: this.$refs['page'],
          icon: 'icon-loading',
          message: '很快就好了',
          callback: () => { console.log('closed') },
          identify: '1'
        })
        this.$UiToastDialog.new({identify: '1'})
        this.$UiToastDialog.new({identify: '1'})
        this.$UiToastDialog.new({identify: '1'})
        this.$UiToastDialog.new({identify: '1'})
        function setTime () {
          setTimeout(() => {
            // 强制关闭所有
            identify1Loading.forceClose()
            // if (identify1Loading) {
            //   console.log('before close: ', identify1Loading.opr.$extraCounter)
            //   identify1Loading.close()
            //   console.log('after close: ', identify1Loading.opr.$extraCounter)
            //   setTime()
            // }
          }, 1000)
        }
        setTime()
      },
      usage3 () {
        function createPromise () {
          return new Promise((resolve, reject) => {
            setTimeout(() => {
              let random = Math.random()
              if (random > 0.5) {
                resolve('哈哈，赢了')
              }
              reject(new Error('呜呜~，输了'))
            }, 3000)
          })
        }
        this.$UiToastDialog.newWithPromise(createPromise(), {
          onEl: this.$refs['page'],
          message: '华山论剑'
        }).then(result => {
          console.log(result)
        }).catch(err => {
          console.log('err--:', err)
        })
      }
    }
  }
</script>
